<template>
    <!-- 详情展示图片信息 -->
    <div class="picture-detail">
        <img v-if="!isShowLaugh" :src="prodInfo.image2" alt="" @click="mxIntoDetail(prodInfo)" />
        <div v-else>
            <img :src="prodInfo.image2" alt="" />
            <div class="open-btn">
                <wx-open-launch-weapp class="launch-btn" id="launch-btn" :username="prodInfo.loanOrgAppId" :path="`${prodInfo.loanDescUrl}?channel=QYWX&RecommendNo=${wxUserId}`">
                    <script type="text/wxtag-template">
                        <style>
                          .btn {
                            font-size: 16px;
                            width: 145px;
                            text-align: center;
                            display: inline-block;
                            border-radius: 20px;
                            padding: 10px 0;
                            background: linear-gradient(#f56969, #e53b3b);
                            color: #ffffff;
                            margin:0 auto;
                          }
                        </style>
                        <div class="btn">打开小程序</div>
                    </script>
                </wx-open-launch-weapp>
            </div>
        </div>
        <share-btn :shareInfo="shareInfo" />
        <back-btn />
    </div>
</template>
<script>
    import financialShopApi from '@/api/financial-shop';
    import mxProductImage from '@/mixin/mxProductImage.js';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    import shareBtn from '@/components/share-btn';
    import backBtn from '@/components/back-btn.vue';
    export default {
        mixins: [mxProductImage, mxInitWxConfig],
        components: { shareBtn, backBtn },
        data() {
            return {
                shareInfo: {},
                isShowLaugh: false,
                prodId: '',
                prodInfo: {}
            };
        },
        watch: {
            wxUserId() {
                if (this.wxUserId) {
                    this.prodId = this.$route.query.id;
                    this.getDetailInfo();
                }
            }
        },
        created() {},
        mounted() {},
        activated() {
            this.prodInfo = {};
            this.isShowLaugh = false;
            // if (this.wxUserId) {
            //   this.getDetailInfo()
            // }
        },
        deactivated() {
            this.wxUserId = '';
        },

        methods: {
            getDetailInfo() {
                financialShopApi
                    .getOtherProductDetail({
                        id: this.prodId
                    })
                    .then((res) => {
                        // 2 精选活动
                        // 4 精选贷款
                        // 5 精选信用卡
                        this.prodInfo = res.data.data;
                        let { code, name, type } = this.prodInfo,
                            typeArr = ['', '', '精选活动', '', '精选贷款', '精选信用卡'],
                            codeArr = ['', '', 'ViewActivityDetail', '', 'LoanView', 'CreditView'],
                            clickCodeArr = ['', '', 'JoinActivity', '', 'LoanApplyClick', 'CreditApplyClick'],
                            obj = {
                                from_page_name: sessionStorage.getItem('from_page_name') || '',
                                recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId
                            };
                        if (type == 4) {
                            obj.loan_type = typeArr[Number(type)];
                            obj.loan_code = code;
                            obj.loan_name = name;
                        } else if (type == 5) {
                            obj.credit_type = typeArr[Number(type)];
                            obj.credit_code = code;
                            obj.credit_name = name;
                        } else if (type == 2) {
                            obj.activity_entrance_type = typeArr[Number(type)];
                            obj.activity_type = name;
                            obj.activity_name = name;
                        }
                        // 当前页面在微信环境中打开的h5页面支持跳转小程序
                        if (this.$utils.pageEnv() == 'wx-mobile' && this.prodInfo.loanDescType == 1) {
                            this.isShowLaugh = true;
                        } else {
                            this.isShowLaugh = false;
                        }
                        this.shareInfo = {
                            title: this.prodInfo.name, // 分享标题
                            desc: this.prodInfo.desc1, // 分享描述
                            link: this.$utils.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: `${this.$utils.apiUrl}${this.prodInfo.image1}`
                        };
                        this.$wxShare.setShareInfo(this.shareInfo);
                        this.$nextTick(() => {
                            let btn = document.getElementById('launch-btn');
                            if (btn) {
                                let _this = this;
                                btn.addEventListener('click', () => {
                                    _this.$sensorsSend(clickCodeArr[Number(type)], obj);
                                });
                            }
                        });
                        this.$sensorsSend(codeArr[Number(type)], obj);
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .picture-detail {
        width: 100%;
        min-height: 100vh;
        background-color: #f9f9f9;
        img {
            width: 100%;
        }
        .open-btn {
            position: fixed;
            bottom: 30px;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .launch-btn {
        width: 145px;
        display: block;
    }
</style>
